import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  ScrollView,
  TouchableOpacity,
  Alert,
} from 'react-native';
import { useNavigation } from '@react-navigation/native';
import { useAppSelector, useAppDispatch } from '../../store';
import { logout } from '../../store/slices/authSlice';
import { useTheme } from '../../contexts/ThemeContext';

const HomeScreen: React.FC = () => {
  const dispatch = useAppDispatch();
  const navigation = useNavigation();
  const { user } = useAppSelector((state) => state.auth);
  const { colors } = useTheme();

  const handleLogout = () => {
    Alert.alert(
      '确认退出',
      '您确定要退出登录吗？',
      [
        { text: '取消', style: 'cancel' },
        { text: '确定', onPress: () => dispatch(logout()) },
      ]
    );
  };

  return (
    <ScrollView 
      style={[styles.container, { backgroundColor: colors.background }]}
      contentContainerStyle={styles.content}
    >
      <View style={[styles.header, { backgroundColor: colors.surface }]}>
        <Text style={[styles.welcomeText, { color: colors.text }]}>
          欢迎回来，{user?.name || '用户'}！
        </Text>
        <Text style={[styles.subtitle, { color: colors.textSecondary }]}>
          今天是个美好的一天
        </Text>
      </View>

      <View style={styles.section}>
        <Text style={[styles.sectionTitle, { color: colors.text }]}>
          快速操作
        </Text>
        
        <View style={styles.cardGrid}>
          <TouchableOpacity 
            style={[styles.card, { backgroundColor: colors.surface }]}
            onPress={() => Alert.alert('功能', '此功能正在开发中')}
          >
            <Text style={[styles.cardTitle, { color: colors.text }]}>
              功能一
            </Text>
            <Text style={[styles.cardDescription, { color: colors.textSecondary }]}>
              功能描述
            </Text>
          </TouchableOpacity>

          <TouchableOpacity 
            style={[styles.card, { backgroundColor: colors.surface }]}
            onPress={() => (navigation as any).navigate('CarList')}
          >
            <Text style={[styles.cardTitle, { color: colors.text }]}>车辆列表</Text>
            <Text style={[styles.cardDescription, { color: colors.textSecondary }]}>查看所有可用车辆</Text>
          </TouchableOpacity>

          <TouchableOpacity 
            style={[styles.card, { backgroundColor: colors.surface }]}
            onPress={() => Alert.alert('功能', '此功能正在开发中')}
          >
            <Text style={[styles.cardTitle, { color: colors.text }]}>
              功能三
            </Text>
            <Text style={[styles.cardDescription, { color: colors.textSecondary }]}>
              功能描述
            </Text>
          </TouchableOpacity>

          <TouchableOpacity 
            style={[styles.card, { backgroundColor: colors.surface }]}
            onPress={() => Alert.alert('功能', '此功能正在开发中')}
          >
            <Text style={[styles.cardTitle, { color: colors.text }]}>
              功能四
            </Text>
            <Text style={[styles.cardDescription, { color: colors.textSecondary }]}>
              功能描述
            </Text>
          </TouchableOpacity>
        </View>
      </View>

      <TouchableOpacity
        style={[styles.logoutButton, { backgroundColor: colors.error }]}
        onPress={handleLogout}
      >
        <Text style={styles.logoutButtonText}>退出登录</Text>
      </TouchableOpacity>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  content: {
    padding: 20,
  },
  header: {
    padding: 20,
    borderRadius: 12,
    marginBottom: 24,
  },
  welcomeText: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 8,
  },
  subtitle: {
    fontSize: 16,
  },
  section: {
    marginBottom: 24,
  },
  sectionTitle: {
    fontSize: 20,
    fontWeight: '600',
    marginBottom: 16,
  },
  cardGrid: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  card: {
    width: '48%',
    padding: 16,
    borderRadius: 12,
    marginBottom: 12,
    minHeight: 100,
    justifyContent: 'center',
  },
  cardTitle: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 8,
  },
  cardDescription: {
    fontSize: 14,
    lineHeight: 20,
  },
  logoutButton: {
    padding: 16,
    borderRadius: 8,
    alignItems: 'center',
    marginTop: 20,
  },
  logoutButtonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '600',
  },
});

export default HomeScreen; 